<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dashboard</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<link rel="stylesheet" href="layui/css/layui.css">
	<link rel="stylesheet" href="static/css/global.css">
	<link rel="stylesheet" href="static/css/dashboard.css">
	<link rel="stylesheet" href="http://at.alicdn.com/t/font_978885_29cu5kb39fk.css">
</head>
<body>
	<div class="container">
		<div class="layui-row">
		    <div class="layui-col-xs6">
		      	<div class="dashboard-grid">
		      		<div class="dashboard-top-entry ac">
		      			<a href="">
		      				<img src="static/image/zbxzck.png" alt="">
		      				<span class="notice">99+</span>
		      			</a>
			      		<a href=""><img src="static/image/dwzp.png" alt=""></a>
			      		<a href=""><img src="static/image/zgrw.png" alt=""></a>
		      		</div>
		      		<div class="dashboard-todolist">
		      			<div class="todolist-title">
		      				<p>待办事项</p>
		      			</div>
		      			<div class="todolist-table">
		      				<div class="table-header vc">
		      					<div class="column flex2">事件</div>
		      					<div class="column flex2">时间</div>
		      					<div class="column flex1 ar">操作</div>
		      				</div>
		      				<div class="header-list">
		      					<div class="vc">
		      						<div class="column-item flex2 iconbefore">1248197</div>
		      						<div class="column-item flex2">2018-09-07 12:00</div>
		      						<div class="column-item flex1">22:02:30</div>
		      						<div class="column-item flex1 ar"><i class="iconfont icon-more"></i></div>
		      					</div>
		      					<div class="vc">
		      						<div class="column-item flex2 iconbefore">1248197</div>
		      						<div class="column-item flex2">2018-09-07 12:00</div>
		      						<div class="column-item flex1">22:02:30</div>
		      						<div class="column-item flex1 ar"><i class="iconfont icon-more"></i></div>
		      					</div>
		      					<div class="vc">
		      						<div class="column-item flex2 iconbefore">1248197</div>
		      						<div class="column-item flex2">2018-09-07 12:00</div>
		      						<div class="column-item flex1">22:02:30</div>
		      						<div class="column-item flex1 ar"><i class="iconfont icon-more"></i></div>
		      					</div>
		      					<div class="vc">
		      						<div class="column-item flex2 iconbefore">1248197</div>
		      						<div class="column-item flex2">2018-09-07 12:00</div>
		      						<div class="column-item flex1">22:02:30</div>
		      						<div class="column-item flex1 ar"><i class="iconfont icon-more"></i></div>
		      					</div>
		      					<div class="vc">
		      						<div class="column-item flex2 iconbefore">1248197</div>
		      						<div class="column-item flex2">2018-09-07 12:00</div>
		      						<div class="column-item flex1">22:02:30</div>
		      						<div class="column-item flex1 ar"><i class="iconfont icon-more"></i></div>
		      					</div>
		      					<div class="vc">
		      						<div class="column-item flex2 iconbefore">1248197</div>
		      						<div class="column-item flex2">2018-09-07 12:00</div>
		      						<div class="column-item flex1">22:02:30</div>
		      						<div class="column-item flex1 ar"><i class="iconfont icon-more"></i></div>
		      					</div>
		      				</div>
		      			</div>
		      		</div>
		      	</div>
		    </div>
		    <div class="layui-col-xs6">
		      	<div class="dashboard-grid">
		      		<div class="grid-top-tooltip">
		      			<div class="tooltip-left">
		      				<p>最新考核结果</p>
		      				<h3>85 <span>分</span></h3>
		      				<p>比上一期<i class="iconfont icon-jiantouarrow499"></i> <span>15.50%</span></p>
		      			</div>
		      			<div class="tooltip-right">
		      				<p>本期考核排名</p>
		      				<h3>05 <span>名</span></h3>
		      				<p>比上一期<i class="iconfont icon-jiantouarrow505"></i> <span>2名</span></p>
		      			</div>
		      		</div>
		      		<div class="dashboard-echarts">
		      			<div class="chart-pie-title">
		      				<p>共计18项考核内容</p>
		      			</div>
		      			<div class="echarts-container">
		      				<div class="echart-normal" id="echarts-render-circle"></div>
		      			</div>
		      		</div>
		      		
		      	</div>
		    </div>
	  	</div>
	  	<div class="layui-row dashboard-grid newlow-grid">
	  		<div class="layui-col-xs6 layui-col-sm6 layui-col-md5  fit-screen">
      			<div class="title-icon">
      				<p>平安考核</p>
      			</div>
      			<div id="echarts-render-pa" class="echart-limit"></div>
      		</div>
      		<div class="layui-col-xs6 layui-col-sm6 layui-col-md5  fit-screen">
      			<div class="title-icon">
      				<p>季度考核</p>
      			</div>
      			<div id="echarts-render-jd" class="echart-limit"></div>
      		</div>
      		<div class="layui-col-md2">
      			<div class="echart-sigle" id="echart-sigle"></div>
      		</div>
	  	</div>
	</div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="static/js/echarts.common.min.js"></script>
<script src="layui/layui.js"></script>
<script>
layui.use(['layer', 'form', 'element'], function(){
  	var layer = layui.layer, form = layui.form, element = layui.element
  	// 右侧图标1
  	var myChart = echarts.init(document.getElementById('echarts-render-circle')); // 右上
  	var myChartPa = echarts.init(document.getElementById('echarts-render-pa'));// 左下
  	var myChartJd = echarts.init(document.getElementById('echarts-render-jd'));// 左中
  	var myChartSg = echarts.init(document.getElementById('echart-sigle'));// 右下
  	var wdwth = document.body.clientWidth > 1440;
    var pieSource = { // 数据格式
        'a': 335,
        'b': 335,
        'c': 335,
        'd': 335,
        'e': 335,
        'f': 335,
        'g': 335,
        'h': 335,
    },

    legendColor = ["#3471fd", "#6babff", "#aee1ff", "#fca98f", "#5598ff", "#4a53ff", "#fe6e52", "#5fc6fc"],// 每个框的颜色
    // richStyle = {};
	source = initData(pieSource);
	var option = {
	    tooltip: {
	        trigger: 'item',
	        textStyle: {
	            color: '#fff',
	        },
	        formatter: "{b} : {c} ({d}%)"
	    },
	    color: legendColor,
	    title: {
	        text:' 12项',
	        subtext:'各加分项占比',
	        left: '14%',
	        top:'40%',
	        textStyle:{
	            color:'#fff',
	            fontSize:25,
	            align:'center',
	            width: 50
	        },
	        subtextStyle: {
	        	align: 'center'
	        }
	    },
	    legend: [{
	            orient: 'vertical',
	            left: 300,
	            y: 'center',
	            icon: 'rect',
	            textStyle: {
	                color: '#cddafd',
	                fontSize: 14,
	                // rich: richStyle,
	                width: 120,
	                height: 20,
	                padding: [5,0,0,0],
	                borderRadius: 3
	            },
	            padding: [30, 0],
	            itemWidth: 15,
	            itemHeight: 15,
	            itemGap: 20,
	            data: source.legendData.slice(0, 4),
	            formatter: function(name) {
	                var oa = option.series[0].data;
	                var total = 0;
	                oa.forEach((item, index) => {
	                    total += item.value;
	                });
	                for (var i = 0; i < oa.length; i++) {
	                    if (name == oa[i].name) {
	                        var left =  '占'+(oa[i].value / total * 100).toFixed(2) + '%'
	                        return left+'   查看';
	                    }
	                }
	            },
	        },
	        {
	            orient: 'vertical',
	            left: 470,
	            y: 'center',
	            icon: 'rect',
	            textStyle: {
	                color: '#cddafd',
	                fontSize: 14,
	                // rich: richStyle,
	                width: 120,
	                height: 20,
	                padding: [5,0,0,0],
	                borderRadius: 3
	            },
	            padding: [30, 0, 30, 0],
	            itemWidth: 15,
	            itemHeight: 15,
	            itemGap: 20,
	            data: source.legendData.slice(4),
	            formatter: function(name) {
	                var oa = option.series[0].data;
	                var total = 0;
	                oa.forEach((item, index) => {
	                    total += item.value;
	                });
	                for (var i = 0; i < oa.length; i++) {
	                    if (name == oa[i].name) {
	                        // return name + '  ' + '{style' + i + '|' + (oa[i].value / total * 100).toFixed(2) + '%}';
	                        var left =  '占'+(oa[i].value / total * 100).toFixed(2) + '%'
	                        return left+'   查看';

	                    }
	                }
	            },
	        }
	    ],
	    series: [{
	        type: 'pie',
	        radius: ['50%', '80%'],
	        center: ['20%', '50%'],
	        data: source.source,
	        hoverAnimation: false,
	        itemStyle: {
	            normal: {
	                label: {
	                    show: false
	                },
	                borderColor: 'rgba(0,0,0,0)',
	            	borderWidth: 5
	            },
	            
	        }
	    }]
	};

    // end1

	var option1 = {
	    tooltip: {},
	    grid: {
	        top: '8%',
	        left: '1%',
	        right: '1%',
	        bottom: '8%',
	        containLabel: true,
	    },
	    xAxis: [{
	        type: 'category',
	        boundaryGap: true,
	        axisLine: { //坐标轴轴线相关设置。数学上的x轴
	            show: false,
	        },
	        axisLabel: { //坐标轴刻度标签的相关设置
	            textStyle: {
	                color: '#d1e6eb',
	                margin: 10,
	            },
	        },
	        axisTick: {
	            show: false,
	        },
	        data: ['2018年\n1月', '2018年\n2月', '2018年\n3月', '2018年\n4月', '2018年\n5月', '2018年\n6月', '2018年\n7月' ]
	        // \n 换行
	        // 需要指定第几个字符换行激活次选项 同时删除data内的\n
	        // formatter: function(value) {
	         //        var ret = ""; //拼接加\n返回的类目项
	         //        var maxLength = 5; //每项显示文字个数
	         //        var valLength = value.length; //X轴类目项的文字个数
	         //        var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
	         //        if (rowN > 1) //如果类目项的文字大于5,
	         //        {
	         //            for (var i = 0; i < rowN; i++) {
	         //                var temp = ""; //每次截取的字符串
	         //                var start = i * maxLength; //开始截取的位置
	         //                var end = start + maxLength; //结束截取的位置
	         //                //这里也可以加一个是否是最后一行的判断，但是不加也没有影响
	         //                temp = value.substring(start, end) + "\n";
	         //                ret += temp; //凭借最终的字符串
	         //            }
	         //            return ret;
	         //        } else {
	         //            return value;
	         //        }
	         //    },
	    }],
	    yAxis: [{
	        type: 'value',
	        min: 0,
	        // max: 140,
	        // splitNumber: 10,
	        splitLine: {
	            show: true,
	            lineStyle: {
	                color: '#343434',
	                type: 'dashed',
	                width: 1.5
	            }
	        },
	        axisLine: {
	            show: false,
	        },
	        axisLabel: {
	            margin: 20,
	            textStyle: {
	                color: '#d1e6eb',

	            },
	        },
	        axisTick: {
	            show: false,
	        },
	    }],
	    series: [{
	        type: 'line',
	        // smooth: true, //是否平滑曲线显示
			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
	        showAllSymbol: true,
	        // symbol: 'emptyCircle',
	        symbolSize: 9,
	        lineStyle: {
	            normal: {
	                color: "#3aa1ff", // 线条颜色
	            },
	        },
	        itemStyle: {
	            normal: {
	                color: "#3aa1ff",
	            }
	        },
	        data: [393, 438, 485, 631, 689, 824, 587, 312]
	    }, {
	        type: 'bar',
	        barWidth: 20,
	        label: {
	            show: false
	        },
	        itemStyle: {
	        	emphasis: {
	        		label: {
	        			// show: false
	        		}
	        	},
	            normal: {
	            	color: '#26D968'
	                // barBorderRadius: 5,
	                // color: new echarts.graphic.LinearGradient(
	                //     0, 0, 0, 1,
	                //     [{
	                //             offset: 0,
	                //             color: '#14c8d4'
	                //         },
	                //         {
	                //             offset: 1,
	                //             color: '#43eec6'
	                //         }
	                //     ]
	                // )
	                // color: function(params) {
	                //     var colorList = ['#0ec1ff', '#10cdff', '#12daff', '#15ebff', '#17f8ff', '#1cfffb', '#1dfff1'];
	                //     return colorList[params.dataIndex];
	                // }
	            }
	        },
	        data: [200, 382, 102, 267, 186, 315, 316, 124]
	    }]
	};

	// end1
	var option2 = {
	    tooltip: {},
	    grid: {
	        top: '8%',
	        left: '1%',
	        right: '1%',
	        bottom: '8%',
	        containLabel: true,
	    },
	    xAxis: [{
	        type: 'category',
	        boundaryGap: true,
	        axisLine: { //坐标轴轴线相关设置。数学上的x轴
	            show: false,
	        },
	        axisLabel: { //坐标轴刻度标签的相关设置
	            textStyle: {
	                color: '#d1e6eb',
	                margin: 10,
	            },
	        },
	        axisTick: {
	            show: false,
	        },
	        data: ['2018年\n1月', '2018年\n2月', '2018年\n3月', '2018年\n4月', '2018年\n5月', '2018年\n6月', '2018年\n7月' ]
	    }],
	    yAxis: [{
	        type: 'value',
	        min: 0,
	        // max: 140,
	        // splitNumber: 10,
	        splitLine: {
	            show: true,
	            lineStyle: {
	                color: '#343434',
	                type: 'dashed',
	                width: 1.5
	            }
	        },
	        axisLine: {
	            show: false,
	        },
	        axisLabel: {
	            margin: 20,
	            textStyle: {
	                color: '#d1e6eb',

	            },
	        },
	        axisTick: {
	            show: false,
	        },
	    }],
	    series: [{
	        type: 'line',
	        // smooth: true, //是否平滑曲线显示
			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
	        showAllSymbol: true,
	        // symbol: 'emptyCircle',
	        symbolSize: 9,
	        lineStyle: {
	            normal: {
	                color: "#3aa1ff", // 线条颜色
	            },
	        },
	        itemStyle: {
	            normal: {
	                color: "#3aa1ff",
	            }
	        },
	        tooltip: {
	        },
	        data: [393, 438, 485, 631, 689, 824, 587]
	    }, {
	        type: 'bar',
	        barWidth: 20,
	        tooltip: {
	            show: true
	        },
	        label: {
	            show: false
	        },
	        itemStyle: {
	        	emphasis: {
	        		label: {
	        			// show: false
	        		}
	        	},
	            normal: {
	            	color: '#26D968'
	                // barBorderRadius: 5,
	                // color: new echarts.graphic.LinearGradient(
	                //     0, 0, 0, 1,
	                //     [{
	                //             offset: 0,
	                //             color: '#14c8d4'
	                //         },
	                //         {
	                //             offset: 1,
	                //             color: '#43eec6'
	                //         }
	                //     ]
	                // )
	                // color: function(params) {
	                //     var colorList = ['#0ec1ff', '#10cdff', '#12daff', '#15ebff', '#17f8ff', '#1cfffb', '#1dfff1'];
	                //     return colorList[params.dataIndex];
	                // }
	            }
	        },
	        data: [200, 382, 102, 267, 186, 315, 316]
	    }]
	};

	// end2

	var pieSource1 = { // 数据格式
        'a': 335,
        'b': 335,
        'c': 335,
        'd': 335,
        'e': 335,
        'f': 335,
    },
    legendColor1 = ["#3471fd", "#6babff", "#aee1ff", "#fca98f", "#5598ff", "#4a53ff"],// 每个框的颜色
    // richStyle1 = {};

	source1 = initData(pieSource1);
	var option3 = {
	    tooltip: {
	        trigger: 'item',
	        textStyle: {
	            color: '#fff',
	        },
	        formatter: "{b} : {c} ({d}%)"
	    },
	    color: legendColor1,
	    title: {
	        text:'  6项',
	        subtext:'各减分项占比',
	        left: !wdwth ? '8%' : '12%',
	        top:'37%',
	        textStyle:{
	            color:'#fff',
	            fontSize: 22,
	            align:'center',
	        },
	        subtextStyle: {
	        	align: 'center'
	        }
	    },
	    legend: [{
	            orient: 'vertical',
	            left: !wdwth ? 180 : 220,
	            y: 'center',
	            icon: 'rect',
	            textStyle: {
	                color: '#cddafd',
	                fontSize: 14,
	                // width: 120,
	                // height: 20,
	                borderRadius: 5
	            },
	            padding: [30, 0],
	            itemWidth: 15,
	            itemHeight: 15,
	            itemGap: 20,
	            data: source1.legendData,
	            formatter: function(name) {
	            	console.log(name)
	                var oa = option3.series[0].data;
	                var total = 0;
	                oa.forEach((item, index) => {
	                    total += item.value;
	                });
	                console.log('oa',oa)
	                for (var i = 0; i < oa.length; i++) {
	                    if (name == oa[i].name) {

	                        var left =  '占'+(oa[i].value / total * 100).toFixed(2) + '%'
	                        return left+'   查看';
	                    }
	                }
	            },
	        }
	    ],
	    series: [{
	        type: 'pie',
	        radius: [!wdwth ? '35%' : '50%', !wdwth ? '53%' : '80%'],
	        center: ['20%', '50%'],
	        data: source1.source,
	        hoverAnimation: false,
	        itemStyle: {
	            normal: {
	                label: {
	                    show: false
	                },
	                borderColor: 'rgba(0,0,0,0)',
	            	borderWidth: 5
	            },
	            
	        }
	    }]
	};

	// end3

	myChart.setOption(option);
    myChart.on('legendselectchanged', function (params) { // 点击图标的查看事件
	    console.log(params.name);// 打印出对应的name
	});
	myChartPa.setOption(option1);
	myChartJd.setOption(option2);
	myChartSg.setOption(option3);
	myChartSg.on('legendselectchanged', function (params) { // 点击图标的查看事件
	    console.log(params.name);// 打印出对应的name
	});

	$('.dashboard-top-entry img').on('mouseover',function(){
		var src = $(this).attr('src')
		var newsrc = src.replace('.png','-active.png')
		console.log(newsrc)
		$(this).attr('src', newsrc)
	})
	$('.dashboard-top-entry img').on('mouseleave',function(){
		var src = $(this).attr('src')
		var newsrc = src.replace('-active.png','.png')
		console.log(newsrc)
		$(this).attr('src', newsrc)
	})

	function initData(source) { // 初始化显示的数据 处理数据的样式
	    // legendColor.map((item, index) => {
	    //     richStyle['style' + index] = {};
	    //     richStyle['style' + index]['color'] = item;
	    //     richStyle['style' + index]['align'] = 'right';
	    //     richStyle['style' + index]['cursor'] = 'pointer';
	    // });
	    if (Object.prototype.toString.call(source) === '[object Object]') {
	        var arr = [];
	        var legendData = [];
	        Object.entries(source).forEach((value) => {
	            legendData.push(value[0]);
	            var obj = {};
	            obj.name = value[0];
	            obj.value = value[1];
	            arr.push(obj);
	        });
	        // console.log(arr)
	        // console.log(richStyle)
	        source = arr;
	        return {
	            source,
	            legendData
	        };
	    } else if (source && Object.prototype.toString.call(source) === '[object Array]') {
	        var legendData = [];
	        source.forEach((item, index) => {
	            legendData.push(item.name);
	        });
	        return {
	            source,
	            legendData
	        };
	    }
	}
});



// iframe外部控制frame 内容页面跳转↓
// 写在外部的js逻辑里
//window.frames.location.href="http://localhost:8090/dashboard3.html"

// iframe 内部页面跳转↓
// 直接写在iframe内部的逻辑里
// window.location.href="http://localhost:8090/dashboard3.html"

</script>
</html>